<template>
	<li class="vux-timeline-item">
		<div class="iconfont" :class="['vux-timeline-item-color',{'icon-xiangshangshouqi-yuankuang': !isFirst},{'vux-timeline-item-head': !isFirst,'vux-timeline-item-head-first': isFirst }]" :style="headStyle">
      <span v-show="!isFirst">&#xe8f3;</span>
      <icon
        v-show="isFirst && $parent.isShowIcon"
        :type="iconType"
        class="vux-timeline-item-checked"></icon>
		</div>
		<div class="vux-timeline-item-tail" :style="tailStyle"></div>
		<div class="vux-timeline-item-content">
			<slot></slot>
		</div>
	</li>
</template>

<script>
  import { Icon } from 'vux'

export default {
  data () {
    return {
      isLast: true,
      isFirst: true,

      headStyle: { backgroundColor: this.$parent.color }
    }
  },
	props:{
		iconType:String
	},
  mounted () {
    this.$parent.setChildProps()
  },
  beforeDestroy () {
    // this will be null
    const $parent = this.$parent
    this.$nextTick(() => {
      $parent.setChildProps()
    })
  },
  components: {
    Icon
  },
  computed: {
    tailStyle () {
      return this.isLast ? { display: 'none', backgroundColor: this.$parent.color } : { display: 'block', backgroundColor: this.$parent.color }
    }
  }
}
</script>
